<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" th:href="@{/el/element.css}">
    <script th:src="@{/js/vue.js}" type="text/javascript"></script>
    <!--    <script th:src="@{https://unpkg.com/element-ui/lib/index.js}" type="text/javascript"></script>-->
    <script th:src="@{/el/element.js}" type="text/javascript"></script>
    <script th:src="@{/js/axios.js}" type="text/javascript"></script>
    <script th:src="@{/js/wangEditor.min.js}" type="text/javascript"></script>
</head>
<style>

    html,body,#app {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    .layout-container{
        height: 100%;
    }
    .box-card {
        width: 95%;
        margin-bottom: 5px;
    }
</style>
<body>
<div id="app">
    <el-container class="layout-container">
        <el-header>
            <div th:include="~{common/homePage::head}"></div>
        </el-header>
        <el-container>
            <el-aside width="250px">
                <div th:include="~{common/sidebar::sidebar}"></div>
            </el-aside>
            <el-main>
                <div style="width: 100%;height: 60px">
                    <span style="font-weight: bold;font-size: 24px">{{blog.title}}</span>
                    <div style="color: darkgrey;font-size: 10px">
                        &nbsp;&nbsp;作&nbsp;&nbsp;者:<span>{{blog.author}}</span>
                        &nbsp;&nbsp;&nbsp;发布时间:<span>{{blog.createTime}}</span>&nbsp;&nbsp;
                    </div>
                </div>
                <hr style="color: darkgrey;margin-bottom: 5px;margin-top: 5px">
                <div v-html="blogContext.context" style="min-height: 60%">
                </div>
                <div style="float: right">
                    <el-tag>阅读量:{{blog.readvolume}}</el-tag>
                </div>
                <br>
                <hr style="margin-top: 3px">
                <el-card class="box-card" >
                    <div slot="header" class="clearfix" >
                        <span style="font-size: 32px">评论区</span>
                    </div>
                    <div class="text">

                        <el-card class="box-card" v-for="dis in discusss">
                            <span>{{dis.username}} :</span>
                            <span>{{dis.context}}</span>
                            <el-button type="text" @click="add2Dis(dis,dis.id)">回复</el-button>
                            <span style="float: right">{{dis.createTime}}</span>
<!--                            子评论区-->
                            <el-collapse v-model="activeName" accordion @change="handleChange" >
                               <template v-if="dis.open">
                                   <el-collapse-item  :name="dis.id" @click.native="findByDisLevel(dis.id)">
                                       <template slot="title">
                                           展开评论
                                       </template>
                                       <el-card class="box-card" v-for="disl in dislevel">
                                           <span>{{disl.username}} &nbsp;回复&nbsp; @{{disl.disname}}&nbsp;: </span>
                                           <span>{{disl.context}}</span>
                                           <el-button type="text" @click="add2Dis(disl,dis.id)">回复</el-button>
                                           <span style="float: right">{{disl.createTime}}</span>
                                       </el-card>
                                   </el-collapse-item>
                            </el-collapse>
                               </template>
                        </el-card>
                    </div>
                </el-card>
                <el-footer style="margin-top: 40px;">
                    <el-pagination
                            layout="prev, pager, next"
                            :page-size="num"
                            :total="total"
                            @current-change="findByDis"
                            :current-page="curPage"
                            background>
                    </el-pagination>
                    <h2>评论:</h2>
                    <el-input
                            type="text"
                            placeholder="请发表你的看法"
                            v-model="discuss.context"
                            maxlength="30"
                            show-word-limit
                    >
                    </el-input>
                    <br>
                    <el-button type="primary" @click="addDiscuss()" style="margin-top: 5px">发表评论</el-button>
                   </el-footer>
            </el-main>
        </el-container>
    </el-container>


    <el-drawer
            title="评论"
            :visible.sync="drawer"
            direction="btt"
            :before-close="handleClose">
        <el-input
                type="text"
                :placeholder="text"
                v-model="discuss.context"
                maxlength="30"
                show-word-limit
        >
        </el-input>
        <br>
        <el-button type="primary" @click="addDiscuss()" style="margin-top: 5px">发表评论</el-button>
    </el-drawer>

    <!--        个人博客列表-->
    <el-dialog title="个人博客" :visible.sync="myblogFlag">
        <el-table :data="myblogs"  max-height="300">
            <el-table-column property="title" label="标题" width="150"></el-table-column>
            <el-table-column property="author" label="作者" width="100"></el-table-column>
            <el-table-column property="readvolume" label="阅读量"></el-table-column>
            <el-table-column property="review" label="评论数"></el-table-column>
            <el-table-column  fixed="right"
                              label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="updBlog(scope.row.id)">更新博客</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
    <!--        密码修改-->
    <el-dialog title="密码修改" :visible.sync="dialogFormVisible">
        <el-form :model="user">
            <el-form-item label="新密码" :label-width="formLabelWidth">
                <el-input v-model="user.password" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updPwd()">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="用户名修改" :visible.sync="dialogFormVisible2">
        <el-form :model="user">
            <el-form-item label="新的名字" :label-width="formLabelWidth">
                <el-input v-model="user.name" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible2 = false">取 消</el-button>
            <el-button type="primary" @click="updName()">确 定</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{

            drawer:false,
            dialogFormVisible:false,
            dialogFormVisible2:false,
            myblogFlag:false,
            ind:1,
            num:10,
            curPage: 0,
            total:0,
            formLabelWidth:"120px",
            activeIndex: '1',
            activeIndex2: '1',
            activeName: '1',
            text:"",
            condition:"",
            myblogs:[{}],
            blog:{
                id:"",
                author:"",
                uid:"",
                readvolume:"",
            },
            user:[{}],
            blogContext:{},
            discuss:{
                blogId:"",
                context:"",
            },
            topblog:[{}],
            types:[{}],
            discuss2:{},
            discusss:[{}],
            discusss2:[{}],
            dislevel:[{}],
            //单纯作为一个临时存储子评论数量的数组存在
            disopen:[],
        },
        methods:{
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            handleChange(val)
            {
                console.log("val"+val);
            },
            go2Back()
            {
                window.location.href="/login/index"
            },
            add2Blog(){
                console.log("addblog（")
                this.blog={};
                top.location.href="/api/blog/go2AddBlog"
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            addDiscuss(){
                if (Object.keys(this.discuss2).length!==0)
                {
                    this.discuss.disname=this.discuss2.username;
                    this.discuss.disid=this.discuss2.id;
                    this.discuss.level=1;
                }else
                {
                    this.discuss.level=0;
                }
                var that = this;
                this.discuss.blogId=this.blog.id
                console.log(this.discuss)
                axios.post("/api/dis/addDis",this.discuss)
                .then(resp=>{
                    if (resp.data.data===undefined)
                    {
                        document.cookie="path="+"/public/findById/"+this.blog.id+";path=/login/go2LogIn;"
                        window.location.href="/login/go2login"
                    }
                    if (resp.data.data)
                    {
                        that.$message({
                            showClose: true,
                            offset: resp.data.code,
                            message:resp.data.msg,
                            type: 'warning'
                        });
                        this.discuss={}
                        this.disopen=[]
                        this.findByDis(0)
                        this.findByDisLevel(this.discuss2.id);
                        //重置子评论区域的展开状态
                        this.activeName="0";
                    }else
                    {

                        that.$message({
                            showClose: true,
                            offset: resp.data.code,
                            message:resp.data.msg,
                            type: 'error'
                        });
                    }
                    this.discuss2={};
                    this.drawer=false;
                })
            },
            add2Dis(dis,disid)
            {
            //    负责子评论区
                this.drawer=true;
                this.text="回复 @"+dis.username+" : "+dis.context
                this.discuss2={id:disid,username:dis.username}
            },
            findByDis(pagenum){
                axios.get("/public/dis/findByDis/"+this.blog.id+"/"+pagenum)
                .then(resp=>{
                    this.discusss = resp.data.data.list
                    this.total = resp.data.data.total;
                    for (dis of this.discusss)
                    {
                        this.findByDisLevel(dis.id)
                    }
                })
            },
            findByDisLevel(disid){
                axios.get("/public/dis/findByDisLevel/"+disid+"/1")
                .then(resp=>{
                    this.dislevel=resp.data.data;
                    this.disopen.push({id:disid,num:resp.data.data.length})
                    for (dis of this.discusss)
                    {
                        for (num of this.disopen)
                        {
                            if (num.id==dis.id)
                            {
                                Vue.set(dis,"open",num.num>0?true:false)
                            }
                        }
                    }
                    console.log("level")
                    console.log(this.dislevel)
                })
            },
            findByBlogType(typeid){
                //此页不处理类型博客请求，跳转到主页处理
                this.setCookie("typeid",typeid,"/login/index",0)
                window.location.href="/login/index"
            },
            showContext(blogid){
                window.location.href="/public/findById/"+blogid
            },
            setCookie(c_name, value,path, expiredays){
                var exdate=new Date();
                exdate.setDate(exdate.getDate() + expiredays);
                document.cookie=c_name+ "=" + value +";path="+path+";" + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
            },
            searchBlog(){
                this.setCookie("condition",this.condition,"/login/index",1)
                window.location.href="/login/index"
            },
                handleCommand(command) {

                   if(command=="logOut")
                    {
                        window.location.href="/logOut"
                    }else if(command=="add2Blog")
                    {
                        this.add2Blog()
                    }else if(command=="findAllBLog")
                    {
                        this.findAllBlogs()
                        this.myblogFlag=true;
                    }else if (command=="go2UserInfo")
                    {
                        window.location.href="/user/go2MyInfo"
                    }
                },
                go2Login(){
                    window.location.href="/login/go2LogIn"
                },

                findAllBlogs(){
                    axios.get("/api/blog/findAll")
                        .then(resp=>{
                            this.myblogs=resp.data.data
                        })
                },
                updBlog(id){
                    this.setCookie("blogid",id,"/api/blog/go2AddBlog",1)
                    window.location.href="/api/blog/go2AddBlog"
                }

        },
        mounted:function(){
            //获取博客内容
            axios.get("/public/getBlog")
                .then(resp=>{
                    this.blog=resp.data.data.blog
                    this.blogContext=resp.data.data.blogContext
                    //获取评论区
                    this.findByDis(1);
                });

            //排行榜
            axios.get("/public/findByCTTop/readvolume")
                .then(resp=>{
                    this.topblog = resp.data.data
                })

            document.cookie="path="+""

            //类型初始化
            axios.get("/public/type/findAll")
                .then(resp=>{
                    console.log(resp)
                    this.types=resp.data.data;
                })


        }


    })
</script>
</html>